<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-27 15:06:01
-->
<template>
  <continer>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item
          label="技能组"
          prop="peerId"
          :rules="[
            { required: true, message: '技能组必填', trigger: 'change' }
          ]"
        >
          <m7Select
            size="mini"
            v-model="formData.peerId"
            :placeholder="'请选择技能组'"
            filterable
            :multiple="false"
            :collapse-tags="false"
            :options="queueList"
            clearable
            :remote="true"
            :defaultProps="{ label: 'name', value: '_id' }"
          >
          </m7Select>
        </el-form-item>
        <el-form-item
          label="欢迎语"
          prop="welcomeMessageObj.content"
          :rules="[
            { required: false, message: '欢迎语必填', trigger: 'change' }
          ]"
        >
          <div class="has-config">
            <el-input
              v-model="formData.welcomeMessageObj.content"
              size="mini"
            ></el-input
            ><i
              class="V7_iconfont V7_iconV7tubiao_gerenshezhi-shezhi"
              @click="setMessage(formData.welcomeMessageObj)"
            ></i>
          </div>
        </el-form-item>
        <el-form-item
          label="排队提示语"
          prop="welcomeMessageObj.content"
          :rules="[
            { required: false, message: '排队提示语必填', trigger: 'change' }
          ]"
        >
          <div class="has-config">
            <el-input v-model="formData.tipsObj.content" size="mini"></el-input
            ><i
              class="V7_iconfont V7_iconV7tubiao_gerenshezhi-shezhi"
              @click="setMessage(formData.tipsObj)"
            ></i>
          </div>
        </el-form-item>
        <el-form-item
          label="排队安抚语"
          prop="welcomeMessageObj.content"
          :rules="[
            { required: false, message: '安抚语必填', trigger: 'change' }
          ]"
        >
          <div class="has-config">
            <el-input
              v-model="formData.appeaseObj.content"
              size="mini"
            ></el-input
            ><i
              class="V7_iconfont V7_iconV7tubiao_gerenshezhi-shezhi"
              @click="setMessage(formData.appeaseObj)"
            ></i>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="has-config">
            <el-checkbox @change="cancelQueue"  v-model="formData.isShowCancelQueue">退出排队</el-checkbox>
            <el-tooltip
              class="item"
              effect="dark"
              content="选中后访客可在排队时主动退出排队，并可配置排队放弃后流向"
              placement="top">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item label="排队人数提示语：" v-if="formData.isShowCancelQueue">
          <el-input v-model="formData.queueTips" placeholder="请输入人数提示语"></el-input>
        </el-form-item>
        <el-form-item
          :label="item.label"
          prop="region"
          v-for="(item, index) in condition"
          filterable
          :key="index"
        >
          <span slot="label">
            {{ item.label }}
            <el-tooltip
              class="item"
              effect="dark"
              :content="index | getTip"
              placement="top"
              v-if="index !== 3"
            >
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
          </span>
          <div class="has-config">
            <el-select
              v-model="item.to"
              placeholder="请选择下一步节点"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="(node, index) in nodeList"
                :label="node.data.name"
                :value="node.id"
                v-show="!node.viewOnly && node.id !== currentData.id"
                :key="index"
              ></el-option>
            </el-select>
            <!-- <i
              class="V7_iconfont V7_iconV7tubiao_gerenshezhi-shezhi"
              @click="setMessage(item.customValue)"
            ></i> -->
          </div>
        </el-form-item>
      </el-form>
      <el-dialog
        :title="messageDialogTitle"
        :visible.sync="dialogSetMessageVisible"
        :modal="false"
        :width="'480px'"
        :top="'30vh'"
      >
        <setMessage
          ref="setMessage"
          :placeholder="messagePlaceholder"
          :value="messageObj"
          @input="messageObjChange"
        ></setMessage>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogSetMessageVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveMessage">确 定</el-button>
        </div>
      </el-dialog>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type="danger" size="mini">删除</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Mixins, Watch } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'
import remoteSelect from '@/components/configCommon/operate-modules/remoteSearch/index.vue'
import setMessage from './common/setMessage.vue'
import cloneDeep from 'lodash/cloneDeep'
interface ValueObj {
  type?: 'welcomeMessage' | 'overtime' | 'excess',
  content: string,
  textType: 'ordinary' | 'rich'
}
@Component({
  name: 'im-node-transfer',
  components: { continer, remoteSelect, setMessage },
  filters: {
    getTip (index) {
      if (index === 0) {
        return '超过技能组最大排队时间溢出'
      } else if (index === 1) {
        return '超过技能组最大排队数溢出'
      } else if (index === 2) {
        return '技能组无有效座席时溢出'
      }
    }
  }
})
export default class extends Mixins(nodeEidtMixins) {
  private dialogSetMessageVisible = false

  private messageObj: ValueObj = { content: '', textType: 'ordinary' }

  private messageDialogTitle: string = ''
  private messagePlaceholder: string = ''

  private setMessage (currentData: ValueObj): void {
    this.$set(this, 'messageObj', cloneDeep(currentData))
    if (currentData.type === 'welcomeMessage') {
      this.messageDialogTitle = '设置欢迎语'
      this.messagePlaceholder = '您好，欢迎您的咨询，我是客服顾问-{座席昵称}，很高兴为您服务哦'
    } else if (currentData.type === 'overtime') {
      this.messageDialogTitle = '设置排队安抚语'
      this.messagePlaceholder = '当前人工座席繁忙，正在为您接入中，请您耐心等待'
    } else if (currentData.type === 'excess') {
      this.messageDialogTitle = '设置排队提示语'
      this.messagePlaceholder = '已经收到您的消息，请您耐心等待'
    }
    this.dialogSetMessageVisible = true
  }

  private saveMessage (): void {
    (this.$refs as any).setMessage.refresh()
    this.dialogSetMessageVisible = false
  }

  private cancelQueue (val) {
    console.log(this.condition)
    if (val) {
      this.condition.push({ label: '退出排队' })
    } else {
      this.condition.pop()
    }
    console.log(this.condition)
  }

  private messageObjChange (newobj: ValueObj) {
    if (newobj.type === 'welcomeMessage') {
      this.formData.welcomeMessageObj = cloneDeep(newobj)
    } else if (newobj.type === 'overtime') {
      this.formData.appeaseObj = cloneDeep(newobj)
      // this.condition[0].customValue = cloneDeep(newobj)
    } else if (newobj.type === 'excess') {
      this.formData.tipsObj = cloneDeep(newobj)
      // this.condition[1].customValue = cloneDeep(newobj)
    }
  }
}
</script>
<style lang="stylus" scoped>
$config-color = #a5a5ad
.audioProgress
  margin 0 10px 0
.tip-span
  color $icon-gray
  font-size 12px
  cursor pointer
.has-config
  display flex
  align-items center
  .V7_iconfont
    margin-left 10px
    cursor pointer
    color $config-color
</style>
